<template>
    <div class="table-page">
        <a-row justify="space-between" align="center" class="header page_header">
            <a-space wrap>
                <div class="title">加盟商管理</div>
            </a-space>
        </a-row>
        <a-row align="stretch" :gutter="14" class="h-full page_content">
            <a-col :xs="0" :sm="0" :md="6" :lg="5" :xl="5" :xxl="4" class="h-full ov-hidden">
                <DeptTree placeholder="请输入名称" @node-click="handleSelectDept" />
            </a-col>
            <a-col :xs="24" :sm="24" :md="18" :lg="19" :xl="19" :xxl="20" class="h-full ov-hidden">
                <GiTable
                    row-key="id"
                    :data="dataList"
                    :columns="columns"
                    :loading="loading"
                    :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
                    :pagination="pagination"
                    :disabled-tools="['size']"
                    :disabled-column-keys="['userName']"
                    @refresh="search"
                >
                    <template #top>
                        <GiForm v-model="queryForm" :options="options" :columns="queryFormColumns" @search="search" @reset="reset"></GiForm>
                    </template>
                    <template #toolbar-left>
                        <a-button v-permission="['system:enterprise:createComm']" type="primary" @click="onAdd">
                            <template #icon><icon-plus /></template>
                            <template #default>新增</template>
                        </a-button>
                    </template>
                    <template #enterpriseStatus="{ record }">
            <span v-if="record.enterpriseStatus === 1">
                <icon-check-circle-fill class="success" />
                <span>启用</span>
              </span>
                        <span v-if="record.enterpriseStatus === 2">
                <icon-minus-circle-fill class="warning" />
                <span>禁用</span>
             </span>
                    </template>
                    <template #isSystem="{ record }">
                        <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
                        <a-tag v-else color="arcoblue" size="small">否</a-tag>
                    </template>
                    <template #action="{ record }">
                        <a-space>
                            <a-link v-permission="['system:enterprise:getData']" @click="onUpdate(record)">修改</a-link>
                            <a-link
                                    v-permission="['system:enterprise:delete']"
                                    status="danger"
                                    @click="onDelete(record)"
                            >
                                删除
                            </a-link>
                            <a-dropdown>
                                <a-button v-if="has.hasPermOr(['system:enterprise:resetPwd'])" type="text" size="mini">
                                    <template #icon>
                                        <icon-more :size="16" />
                                    </template>
                                </a-button>
                                <template #content>
                                    <a-doption v-permission="['system:enterprise:resetPwd']" @click="onResetPwd(record)">重置密码</a-doption>
                                </template>
                            </a-dropdown>
                        </a-space>
                    </template>
                </GiTable>
            </a-col>
        </a-row>
            <EnterpriseResetPwdModal ref="EnterpriseResetPwdModalRef"/>
    </div>
</template>

<script setup lang="ts">
import DeptTree from '@/views/mch/enterprise/enterpriseType.vue'
import {type EnterpriseQuery,type EnterpriseDto,deleteEnterprise, listEnterprise } from '@/apis/mch/enterprise'
import type { Columns, Options } from '@/components/GiForm'
import type { TableInstanceColumns } from '@/components/GiTable/type'
import EnterpriseResetPwdModal from './EnterpriseResetPwdModal.vue'
import { useTable } from '@/hooks'
import { isMobile } from '@/utils'
import has from '@/utils/has'
import { DisEnableStatusList } from '@/constant/common'
const router = useRouter()
defineOptions({name: 'MchEnterprise'})
const queryForm = reactive<EnterpriseQuery>({
})
const {
    tableData: dataList,
    loading,
    pagination,
    search,
    handleDelete
} = useTable((pageNum) => listEnterprise({...queryForm, ...pageNum }), { immediate: false })

const options: Options = reactive({
    form: { layout: 'inline' },
    col: { xs: 24, sm: 24, md: 5, lg: 4, xl: 4, xxl: 4 },
    btns: { col: { xs: 24, sm: 24, md: 7, lg: 8, xl: 6, xxl: 6 } },
    fold: { enable: true, index: 1, defaultCollapsed: true }
})

const queryFormColumns: Columns = reactive([
    {
        type: 'input',
        field: 'filterName',
        item: {
            hideLabel: true
        },
        props: {
            placeholder: '加盟商名稱',
            allowClear: true
        }
    },
    {
        type: 'select',
        field: 'enterpriseStatus',
        options: DisEnableStatusList,
        item: {
            hideLabel: true
        },
        props: {
            placeholder: '请选择状态',
            allowClear: true
        }
    },
    {
        type: 'range-picker',
        field: 'createTime',
        item: {
            hideLabel: true
        },
        col: { xs: 24, sm: 24, md: 10, lg: 9.5, xl: 9, xxl: 8 }
    }
])

const columns: TableInstanceColumns[] = [
    {
        title: '序号',
        width: 66,
        align: 'center',
        render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
        fixed: !isMobile() ? 'left' : undefined
    },
    {title: '商家名字', dataIndex: 'enterpriseName', align: 'center', show: true ,width: 180 },
    {title: '企业简称', dataIndex: 'abbreviation',align: 'center', ellipsis: true, tooltip: true},
    { title: '状态',  dataIndex: 'enterpriseStatus',slotName: 'enterpriseStatus', align: 'center', width: 120 },
    { title: '联系人', dataIndex: 'personName', align: 'center', width: 120 },
    { title: '联系电话', dataIndex: 'mobile', align: 'center', width: 140 },
    { title: '联系座机', dataIndex: 'telephone', align: 'center', width: 140 },
    { title: '详细地址', dataIndex: 'detailedAddress', ellipsis: true, tooltip: true, width: 180 },
    { title: '创建时间', dataIndex: 'createTime', width: 180 },
    {
        title: '操作',
        slotName: 'action',
        width: 150,
        align: 'center',
        fixed: !isMobile() ? 'right' : undefined,
        show: has.hasPermOr(['system:user:update', 'system:user:delete', 'system:user:resetPwd'])
    }
]
// 重置
const reset = () => {
    queryForm.filterName = undefined
    queryForm.enterpriseStatus = undefined
    queryForm.createTime = []
    search()
}


const EnterpriseResetPwdModalRef = ref<InstanceType<typeof EnterpriseResetPwdModal>>()

// 重置密码
const onResetPwd = (record: EnterpriseDto) => {
    EnterpriseResetPwdModalRef.value?.onReset(record.enterpriseId)
}

// 删除
const onDelete = (record: EnterpriseDto) => {
    return handleDelete(() => deleteEnterprise(record.enterpriseId), {
        content: `是否确定删除 [${record.enterpriseName}]？`,
        showModal: true
    })
}


// 根据选中部门查询
const handleSelectDept = (keys: Array<any>) => {
    queryForm.provinceId = keys.length === 1 ? keys[0] : undefined
    search()
}

// 新增
const onAdd = () => {
    router.push({path: '/mch/enterprise/addOrUpdate'})
}

// 导入
const onImport = () => {
}

// 修改
const onUpdate = (record: EnterpriseDto) => {
    router.push({path: '/mch/enterprise/addOrUpdate', query: {id: record.enterpriseId, type: 'edit'}})
}

// 详情
const onDetail = (record: EnterpriseDto) => {
}
</script>

<style lang="scss" scoped>
.page_header {
    flex: 0 0 auto;
}

.page_content {
    flex: 1;
    overflow: auto;
}
</style>
